<template>
  <el-container>
    <el-row class="wrap" v-loading="loading" element-loading-text="拼命加载中" style="width: 100%;">
      <el-col :span="24" class="warp-breadcrum">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/dashboard' }"><span style="color: #837e7c;font-weight: normal;">首页</span></el-breadcrumb-item>
          <el-breadcrumb-item><span style="color: #5d9cec;font-weight: normal;">监控报表</span></el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>

      <el-col :span="24">
        <!--工具栏-->
        <el-row  class="gg-toolBar-wrap">
          <el-col :span="24" class="toolbar gg-toolBar">
            <el-form :inline="true" :model="formInline">
              <el-form-item>
                <el-select size="small" v-model="formInline.taskStatus" placeholder="切换任务" style="min-width: 240px;">
                  <el-option label="催收" value="1"></el-option>
                  <el-option label="验收" value="2"></el-option>
                  <el-option label="完成" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <!--外呼通话质量结果-->
        <el-row class="gg-tableMainWrap">
          <el-col :span="12">
            <div class="chartsContainer">
              <div id="chartOne" :style="{width: '450px', height: '300px'}"></div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="chartsContainer">
              <h3>外呼通话质量结果</h3>
              <el-table :data="tableOneData" style="width: 100%">
                <el-table-column prop="callType" label="接通情况" width="180"></el-table-column>
                <el-table-column prop="callNum" label="数量"></el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
        <!--通话交互轮次统计-->
        <el-row class="gg-tableMainWrap">
          <el-col :span="12">
            <div class="chartsContainer">
              <div id="chartTwo" :style="{width: '450px', height: '300px'}"></div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="chartsContainer">
              <h3>通话交互轮次统计</h3>
              <el-table :data="tableTwoData" style="width: 100%">
                <el-table-column prop="lunci" label="通话轮次" width="180"></el-table-column>
                <el-table-column prop="lunciNum" label="轮次数量"></el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
        <!--通话时长统计-->
        <el-row class="gg-tableMainWrap">
          <el-col :span="12">
            <div class="chartsContainer">
              <div id="chartThree" :style="{width: '450px', height: '300px'}"></div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="chartsContainer">
              <h3>通话时长统计</h3>
              <el-table :data="tableThreeData" style="width: 100%">
                <el-table-column prop="callTime" label="通话时长(s)" width="180"></el-table-column>
                <el-table-column prop="callTimeNum" label="数据占比(%)"></el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>


      </el-col>
    </el-row>
  </el-container>
</template>

<script>
  export default {
    name: "DataAnalysis",
    data() {
      return {
        total: 0,
        page: 1,
        limit: 10,
        loading: false,
        currentPage: 1,
        formInline: {
          taskStatus: '',
        },
        tableOneData:[
          {
            callType:'接通数',
            callNum:'335'
          },
          {
            callType:'未接通数',
            callNum:'310'
          }
        ],
        tableTwoData:[
          {
            lunci:'3轮',
            lunciNum:'1'
          },
          {
            lunci:'5轮',
            lunciNum:'2'
          }
        ],
        tableThreeData:[
          {
            callTime:'10s~30s',
            callTimeNum:'40'
          },
          {
            callTime:'30s~60s',
            callTimeNum:'60'
          }
        ],

      }
    },
    methods: {
      handleSearch() {
        console.log('submit!');
      },
      drawChartOne(){
        // 基于准备好的dom，初始化echarts实例
        let chartOne = this.$echarts.init(document.getElementById('chartOne'));
        // 绘制图表
        chartOne.setOption({
          color:['#37a2da','#ff9f7f'],
            title : {
              text: '外呼通话质量结果',
              x:'center'
            },
            tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              data: ['接通数','未接通数'],
              formatter: function(name) {
                var index = 0;
                var clientlabels = ['接通数','接通数'];
                var clientcounts = ['51.94%','48.06%'];
                clientlabels.forEach(function(value,i){
                  if(value == name){
                    index = i;
                  }
                });
                return name + "  " + clientcounts[index];
              }

            },
            series : [
              {
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                  {value:335, name:'接通数'},
                  {value:310, name:'未接通数'},
                ],
                itemStyle: {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          })
      },
      drawChartTwo(){
        // 基于准备好的dom，初始化echarts实例
        let chartTwo = this.$echarts.init(document.getElementById('chartTwo'));
        // 绘制图表
        chartTwo.setOption({
          color:['#9d96f5','#fb7293'],
          title : {
            text: '通话交互轮次统计',
            x:'center'
          },
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['3轮','5轮'],
            formatter: function(name) {
              var index = 0;
              var clientlabels = ['3轮','5轮'];
              var clientcounts = ['33.33%','66.67%'];
              clientlabels.forEach(function(value,i){
                if(value == name){
                  index = i;
                }
              });
              return name + "  " + clientcounts[index];
            }

          },
          series : [
            {
              type: 'pie',
              radius : '55%',
              center: ['50%', '60%'],
              data:[
                {value:1, name:'3轮'},
                {value:2, name:'5轮'},
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })

      },
      drawChartThree(){
        // 基于准备好的dom，初始化echarts实例
        let chartThree = this.$echarts.init(document.getElementById('chartThree'));
        // 绘制图表
        chartThree.setOption({
          color:['#9fe6b8','#96bfff'],
          title : {
            text: '通话时长统计',
            x:'center'
          },
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['10s~30s','30s~60s'],
            formatter: function(name) {
              var index = 0;
              var clientlabels = ['10s~30s','30s~60s'];
              var clientcounts = ['40%','60%'];
              clientlabels.forEach(function(value,i){
                if(value == name){
                  index = i;
                }
              });
              return name + "  " + clientcounts[index];
            }

          },
          series : [
            {
              type: 'pie',
              radius : '55%',
              center: ['50%', '60%'],
              data:[
                {value:100, name:'10s~30s'},
                {value:150, name:'30s~60s'},
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })

      }
    },
    mounted(){
      this.drawChartOne();//绘制外呼通话质量结果
      this.drawChartTwo();//绘制通话交互轮次统计
      this.drawChartThree();//绘制通话时长统计

    }
  }
</script>

<style scoped>
  .chartsContainer{
    padding: 15px 20px;
    margin: 0 20px;
  }
</style>
